import { AutoComplete, Card, Col, Empty, Input, Row } from 'antd';
import React, { ChangeEvent, useContext, useState } from 'react';
import { UserManageContext, autoOptionRole } from '../hooks';
import { SearchOutlined, CloseOutlined } from '@ant-design/icons';
import ScrollBarLayout from '@/components/ScrollBarLayout';
import { clickScrollToAnchor, searchChangeColor } from '@/utils';
import MyIcon from '@/components/MyIcon';

interface IOpenRoleRightRowsModalAPI {
  loopRoleTreeList: Record<string, any>[];
  setCheckRoleRowsInfo: (rowInfo: Record<string, any>) => void;
  checkRoleRowsInfo: {
    roleCheckKeys: string[];
    roleCheckRows: Record<string, any>[];
  };
}

export const OpenRoleRightRowsModal: React.FC<IOpenRoleRightRowsModalAPI> = ({ loopRoleTreeList, setCheckRoleRowsInfo, checkRoleRowsInfo }) => {
  /** 引入上下文 */
  const { userFixCls } = useContext(UserManageContext);

  /** 右侧搜索数据 */
  const [searchRightValue, setSearchRightValue] = useState<string>('');

  // 点击搜索
  const onAutoSelectLeft = (value: string, option: any) => {
    setSearchRightValue(value);
    const optionId = option?.key;
    setTimeout(() => {
      clickScrollToAnchor(optionId + 'userControll-roleModal-rightCheckRow');
    }, 1000);
  };

  // 搜索框改变
  const onInputChange = (e: ChangeEvent<HTMLInputElement>) => {
    setSearchRightValue(e.target.value ? e.target.value : '');
  };

  /** 取消选中 */
  const closeCheckRole = (rowId: string) => {
    const selectRoleIds: string[] = checkRoleRowsInfo?.roleCheckKeys?.filter((item: any) => item != rowId);
    const selectRoleRows: Record<string, any>[] = checkRoleRowsInfo?.roleCheckRows?.filter((item: any) => item?.id != rowId);
    setCheckRoleRowsInfo({
      roleCheckKeys: selectRoleIds,
      roleCheckRows: selectRoleRows,
    });
  };

  return (
    <Col
      span={11}
      style={{
        height: document.body.clientHeight * 0.4,
        overflow: 'hidden',
      }}
    >
      <Card
        className={`${userFixCls}userRoleCard`}
        bordered
        title={
          <>
            <Row style={{ display: 'flex', alignItems: 'center' }}>
              <Col span={8}>
                已选： {checkRoleRowsInfo?.roleCheckKeys?.length > 0 ? checkRoleRowsInfo?.roleCheckKeys?.length : 0} /{' '}
                {loopRoleTreeList?.length > 0 ? loopRoleTreeList?.length : 0}
              </Col>
              <Col span={16}>
                <AutoComplete
                  style={{ width: '100%' }}
                  options={autoOptionRole(checkRoleRowsInfo?.roleCheckRows, searchRightValue, 'name')}
                  notFoundContent={<Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />}
                  onSelect={onAutoSelectLeft}
                >
                  <Input suffix={<SearchOutlined />} onChange={onInputChange} placeholder="请按名称搜索" allowClear={true} />
                </AutoComplete>
              </Col>
            </Row>
          </>
        }
      >
        <ScrollBarLayout style={{ padding: '5px 10px' }}>
          {checkRoleRowsInfo?.roleCheckRows && checkRoleRowsInfo?.roleCheckRows.length > 0 ? (
            <>
              {checkRoleRowsInfo?.roleCheckRows?.map((item: any) => {
                const titleNode = searchChangeColor(item?.name, searchRightValue);
                return (
                  <div
                    id={item?.id + 'userControll-roleModal-rightCheckRow'}
                    key={item?.id + 'userControll-roleModal-rightCheckRow'}
                    className={`${userFixCls}userRoleCard-checkRoleRow`}
                  >
                    <div className={`${userFixCls}userRoleCard-checkRoleRow-rowItemCls`}>
                      <MyIcon type={'icon-lianxiren'} />
                      &nbsp;
                      {titleNode}
                    </div>
                    <span
                      style={{
                        margin: '0px 10px',
                        cursor: 'pointer',
                      }}
                      onClick={(e) => {
                        e?.stopPropagation();
                        closeCheckRole(item?.id);
                      }}
                    >
                      <CloseOutlined />
                    </span>
                  </div>
                );
              })}
            </>
          ) : (
            <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
          )}
        </ScrollBarLayout>
      </Card>
    </Col>
  );
};
